<style>
#search .package {
  padding: 10px;
  font-size: 18px;
  border-bottom: 1px solid #ddd;
}

#search .alert a {
  font-size: 20px;
}
#search .package.match {
  font-size: 25px;
  font-weight: bolder;
}
</style>
<div id="search">
  <% if (!packages.length) { %>
    <div class="alert alert-warning">
      Can not found package match <%= keyword %>. You can
      <a href="/sync/<%= keyword %>" target="_blank">SYNC</a> from official npm registry or
      <a href="https://npmjs.org/search?q=<%= keyword %>" target="_blank">SEARCH</a> in official npm website.
    </div>
  <% } else if (packages[0].name !== keyword) { %>
    <div class="alert alert-info">
      Can not found package <%= keyword %>. You can
      <a href="/sync/<%= keyword %>" target="_blank">SYNC</a> from official npm registry or
      <a href="https://npmjs.org/search?q=<%= keyword %>" target="_blank">SEARCH</a> in official npm website.
    </div>
  <% } %>
  <% if (packages.length) { %>
    <h1>
      Packages match "<span style="color: #09f;"><%= keyword %></span>"
    </h1>
    <hr />
    <% for (var i = 0; i < packages.length; i++) {
      var item = packages[i];
    %>
      <div class="package <%= item.name === keyword ? 'match' : '' %>">
        <a href="/package/<%= item.name %>" class="package-name"><%= item.name %></a>
        <span class="package-description"><%= item.description %></span>
      </div>
    <% } %>
  <% } %>

  <% if (keywords.length) { %>
    <h1>
      Keywords match "<span style="color: #09f;"><%= keyword %></span>"
    </h1>
    <hr />
    <% for (var i = 0; i < keywords.length; i++) {
      var item = keywords[i];
    %>
      <div class="package <%= item.name === keyword ? 'match' : '' %>">
        <a href="/package/<%= item.name %>" class="package-name"><%= item.name %></a>
        <span class="package-description"><%= item.description %></span>
      </div>
    <% } %>
  <% } %>
</div>
